<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('申请证书')" />
    <th:block th:include="include :: jquery-smartwizard-css" />
    <style type="text/css">
        /* 如果要让工具栏固定在页面底部,使用下面的样式,不需要的可以注释 */
        .sw>.toolbar-bottom{
            z-index: 100;
            bottom: 0px;
            left: 0;
            width: 100%;
            position: fixed;
            text-align: right;
            background: #fff;
            box-shadow: 0 -2px 6px 1px hsla(223,8%,83%,.5);
            border-top: 1px solid #e3e4e8;
        }
        /* 如果设置了是否自动调节高度为false,需要加滚动条 */
        .sw>.tab-content{
            overflow-x: hidden;
            overflow-y: auto;
        }
        /* 解决工具栏无法固定底部的问题（如果页面没有animated类可以不写这部分代码） */
        .animated {
            animation-fill-mode: none;
            -webkit-animation-fill-mode: none;
            -moz-animation-fill-mode: none;
            -o-animation-fill-mode: none;
        }
        .inputDiv{border: solid 2px #E4E4E7;align-content: center; text-align: center; padding: 5px 18px;position: relative; border-radius: 5px; margin-right: 5px;}
        .sed{border-color: #12B980; color: #12B980;}
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height: 100%;">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>
                        证书申请
                    </h5>
                </div>
                <div class="ibox-content">
                    <div id="smartwizard">
                        <ul class="nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#step-1"> 第一步 </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#step-2"> 第二步 </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                                <div>
                                    <form class="form-horizontal m" style="width: 600px;" id="form-apply-add">
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">加密算法：</label>
                                                    <div class="col-sm-8">
                                                        <div style="display: flex; cursor: pointer;">
                                                            <div id="privateKeyType1" class="inputDiv sed" onclick="removeClassFun('#privateKeyType2', '#privateKeyType1')">
                                                                RSA
                                                            </div>
                                                            <!--<div id="privateKeyType2" class="inputDiv" onclick="removeClassFun('#privateKeyType1', '#privateKeyType2')">
                                                                ECC
                                                            </div>-->
                                                        </div>
                                                        <input id="privateKeyType" name="privateKeyType" class="form-control" type="hidden">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-12">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">证书类型：</label>
                                                    <div class="col-sm-8">
                                                        <div style="display: flex; cursor: pointer;">
                                                            <div id="isUniversal1" class="inputDiv sed" onclick="removeClassFun('#isUniversal2','#isUniversal1')">
                                                                普通证书
                                                            </div>
                                                            <div id="isUniversal2" class="inputDiv" onclick="removeClassFun('#isUniversal1','#isUniversal2')">
                                                                通配符证书
                                                            </div>
                                                        </div>
                                                        <input id="isUniversal" name="isUniversal" class="form-control" type="hidden">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-12">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label is-required">颁发机构：</label>
                                                    <div class="col-sm-8">
                                                        <div style="display: flex; cursor: pointer;">
                                                            <div class="inputDiv sed" id="issuingAuthority1" onclick="removeClassFun('#issuingAuthority2', '#issuingAuthority3', '#issuingAuthority1')">
                                                                <div style="width: 130px; height: 35px;">
                                                                    <img th:src="@{/img/letsencrypt.png}"  alt="Let's Encrypt" style="width: 100%; height: 100%;"/>
                                                                </div>
                                                                Let's EncryptSSL
                                                            </div>
                                                            <div class="inputDiv" id="issuingAuthority2" onclick="removeClassFun('#issuingAuthority1', '#issuingAuthority3', '#issuingAuthority2')">
                                                                <div style="width: 130px; height: 35px;">
                                                                    <img th:src="@{/img/google.png}"  alt="Let's Encrypt" style="width: 95px; height: 32px;"/>
                                                                </div>
                                                                GoogleSSL
                                                            </div>
                                                            <div class="inputDiv" id="issuingAuthority3" onclick="removeClassFun('#issuingAuthority1','#issuingAuthority2','#issuingAuthority3')">
                                                                <div style="width: 130px; height: 35px;">
                                                                    <img th:src="@{/img/zerossl.png}"  alt="Let's Encrypt" style="width: 100%; height: 100%;"/>
                                                                </div>
                                                                ZeroSSL
                                                            </div>
                                                        </div>
                                                        <input id="issuingAuthority" name="issuingAuthority" class="form-control" type="hidden">
                                                        <span class="help-block m-b-none">建议使用：Let's Encrypt厂商提供的证书</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-12">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label is-required">证书域名：</label>
                                                    <div class="col-sm-8">
                                                        <input id="certificateDomain" name="certificateDomain" placeholder="请输入证书域名" class="form-control" type="text" required>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-12">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">备注：</label>
                                                    <div class="col-sm-8">
                                                        <textarea name="remark" class="form-control"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                                <div>
                                    <form class="form form-horizontal m-t">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">性别：</label>
                                            <div class="col-sm-8">
                                                <select name="sex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
                                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">时间：</label>
                                            <div class="col-sm-8">
                                                <input id="time" name="time" class="form-control time-input" type="text">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">状态：</label>
                                            <div class="col-sm-8">
                                                <div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
                                                    <input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.default}">
                                                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                                <div class="m-t-md">
                                    <p>1、如果不需要工具栏固定在页面底部, 将style中下面的部分取消注释<blockquote>.sw>.toolbar-bottom </blockquote></p>
                                    <p>2、如果设置了自动调节高度(autoAdjustHeight)为true, 将style中下面的部分取消注释<blockquote>.sw>.tab-content </blockquote></p>
                                    <p>3、工具栏的按钮样式会被表单插件中.btn样式覆盖导致bootstrap中的按钮样式无效, 如果需要改变按钮样式可以自己定义并提高优先级</blockquote></p>
                                </div>
                            </div>
                            <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
                                <div class="m-t-md">
                                    <h3>测试多行显示</h3>
                                    <pre style="overflow-x: hidden;"></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: jquery-smartwizard-js" />
<script>
    $(document).ready(function() {
        // 工具栏按钮
        var btnFinish = $('<a id="btn-finish"></a>').text('完成')
            .addClass('btn btn-info')
            .on('click', function(){ submit(); });
        var btnCancel = $('<a id="btn-cancel"></a>').text('取消')
            .addClass('btn btn-danger')
            .on('click', function(){ $('#smartwizard').smartWizard("reset"); });
        // 下面两个按钮是为了因为插件默认的是botton,这里换成<a>,也可以选择用样式替换,或者不替换
        var btnNext = $('<a id="btn-next"></a>').text('下一步')
            .addClass('btn btn-info')
            .on('click', function(){ $('#smartwizard').smartWizard("next");});
        var btnPrev = $('<a id="btn-prev"></a>').text('上一步')
            .addClass('btn btn-success disabled')
            .on('click', function(){ $('#smartwizard').smartWizard("prev"); });
        // 初始化表单向导组件
        $('#smartwizard').smartWizard({
            theme: 'arrows', // default, arrows, dots, progress
            autoAdjustHeight : false, // 自动调整高度, 默认true
            enableURLhash:false, //开启URL hash,开启后点击浏览器前进后退按钮会执行下一步和上一步操作
            transition: {
                animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
            },
            toolbarSettings: {
                showNextButton: false,// 因为上面自定义了下一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
                showPreviousButton: false,// 因为上面自定义了上一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
                toolbarExtraButtons: [btnCancel,btnPrev,btnNext,btnFinish]// 扩展的按钮集合
            }
        });
        $("#privateKeyType").val("RSA");
        $("#isUniversal").val("N");
        $("#issuingAuthority").val("LetsEncryptSSL");
        //监听值的变化
        $("#privateKeyType1").click(function (){
            $("#privateKeyType").val("RSA");
        })
        $("#privateKeyType2").click(function (){
            $("#privateKeyType").val("ECC");
        })

        $("#isUniversal1").click(function (){
            $("#isUniversal").val("N");
            $("#certificateDomain").attr("placeholder", "请输入您的证书域名");
        })
        $("#isUniversal2").click(function (){
            $("#isUniversal").val("Y");
            $("#certificateDomain").attr("placeholder", "格式举例：【*.domain.com或*.aa.domain.com】");
        })

        $("#issuingAuthority1").click(function (){
            $("#issuingAuthority").val("LetsEncryptSSL");
        })
        $("#issuingAuthority2").click(function (){
            $("#issuingAuthority").val("GoogleSSL");
        })
        $("#issuingAuthority3").click(function (){
            $("#issuingAuthority").val("ZeroSSL");
        })
    });
    //效果展示
    function removeClassFun(id1, id2, id3){
        if(id3){
            $(id1).removeClass("sed");
            $(id2).removeClass("sed");
            $(id3).addClass("sed");
        }else{
            $(id1).removeClass("sed");
            $(id2).addClass("sed");
        }
    }
    function submit(){
        var data = {};
        $('.form').each(function (index, form){
            // 这里可以使用$.common.formToJSON(formId);  需要在form上加id
            $.each($(form).serializeArray(), function(i, field) {
                if(data[field.name]) {
                    data[field.name] += ("," + field.value);
                } else {
                    data[field.name] = field.value;
                }
            });
        });
        alert(JSON.stringify(data))
    }
    // 显示步骤时将触发事件
    $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
        // 下面按钮是快速操作栏的
        $("#prev-btn").removeClass('disabled');
        $("#next-btn").removeClass('disabled');
        // 下面按钮是工具栏的
        $("#btn-prev").removeClass('disabled');
        $("#btn-next").removeClass('disabled');
        $("#btn-finish").removeClass('disabled');
        if(stepPosition === 'first') {
            $("#prev-btn").addClass('disabled');// 快速操作栏（演示用）
            $("#btn-prev").addClass('disabled');
            $("#btn-finish").addClass('disabled');
        } else if(stepPosition === 'last') {
            $("#next-btn").addClass('disabled');// 快速操作栏（演示用）
            $("#btn-next").addClass('disabled');
        } else {
            $("#prev-btn").removeClass('disabled');// 快速操作栏（演示用）
            $("#next-btn").removeClass('disabled');// 快速操作栏（演示用）
            $("#btn-prev").removeClass('disabled');
            $("#btn-next").removeClass('disabled');
            $("#btn-finish").addClass('disabled');
        }
    });

    // 该事件在离开某个步骤之前触发
    $("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepNumber, nextStepNumber, stepDirection) {
        if(stepDirection == 'forward'){
            var form = $("#step-" + (currentStepNumber + 1)).find('.form');
            if(form.length > 0){
                return form.validate().form();
            }
            return true;
        }
        return true;
    });

    $("#theme-selector").on("change", function() {
        // Change theme
        var options = {
            theme : $(this).val()
        };
        $('#smartwizard').smartWizard("setOptions", options);
        return true;
    });

    $("#reset-btn").on("click", function() {
        // Reset wizard
        $('#smartwizard').smartWizard("reset");
        return true;
    });

    $("#prev-btn").on("click", function() {
        // Navigate previous
        $('#smartwizard').smartWizard("prev");
        return true;
    });

    $("#next-btn").on("click", function() {
        // Navigate next
        $('#smartwizard').smartWizard("next");
        return true;
    });
</script>
</body>
</html>
